<template>
    <div>
        <x-header :left-options="{backText: ''}">活动评论</x-header>
        <group title="感谢您的评论">
            <cell title="评分" :inline-desc="tip">
                <rater v-model="data3" slot="value"></rater>
            </cell>
            <x-textarea :max="15" placeholder="请填写评论" v-model="content"></x-textarea>
        </group>
        <divider></divider>
        <toast v-model="show" type="text">{{msg}}</toast>
        <group-title>其他用户的评论</group-title>
        <swiper auto height="30px" direction="vertical" :interval=2000 class="text-scroll" :show-dots="false">
            <swiper-item v-for="obj in userComment"><p>{{obj.content}}</p></swiper-item>
        </swiper>
        <box gap="10px 10px">
            <x-button type="primary" @click.native="submit">提交评论</x-button>
        </box>
    </div>
</template>

<script>
    import {
        Divider,
        XHeader,
        Group,
        Cell,
        XButton,
        Box,
        Toast,
        Rater,
        XTextarea,
        Swiper,
        GroupTitle,
        SwiperItem
    } from 'vux'
    import request from 'superagent'

    export default {
        components: {
            Divider,
            XHeader,
            Group,
            Cell,
            XButton,
            Box,
            Toast,
            Rater,
            XTextarea, Swiper, GroupTitle, SwiperItem
        },
        data() {
            return {
                activityId: '',
                show: false,
                msg: '评论成功~',
                data3: 1,
                tip: '非常差，非常没劲',
                content: '',
                userComment: ''
            }
        },
        watch: {
            data3: function (val, oldVal) {
                console.log('new: %s, old: %s', val, oldVal)
                switch (val) {
                    case 0:
                        this.tip = '您还没有打分';
                        break;
                    case 1:
                        this.tip = '非常差，非常没劲';
                        break;
                    case 2:
                        this.tip = '感觉很一般';
                        break;
                    case 3:
                        this.tip = '满意，感觉不错';
                        break;
                    case 4:
                        this.tip = '很满意，下次还要参加这种活动';
                        break;
                    case 5:
                        this.tip = '非常棒，可以带上朋友来';
                        break;
                }
            }
        },
        created: function () {
            this.activityId = this.$route.query.actId;
            this.fetchCommentData()
        },
        methods: {
            fetchCommentData(){
                request.get('http://localhost:8089/comment/activitycommentlist')
                    .query({activityId: this.activityId})
                    .end((err, res) => {
                        console.log(res);
                        if (!res.ok) {
                        } else {
                            let obj = new Object();
                            obj.content = '非常好的活动'
                            this.userComment.push(obj);
                            this.userComment = this.userComment.concat(JSON.parse(res.text).data);
                        }
                    });
            },
            submit(id) {
                if (this.data3 == 0) {
                    this.msg = '请给活动打分';
                    this.show = true;
                } else {
                    request.post('/wx/comment/commentactivity')
                        .send({
                            activityId: this.activityId,
                            score: this.data3,
                            content: this.content
                        })
                        .set('Content-Type', 'application/x-www-form-urlencoded')
                        .end((err, res) => {
                            console.log(res);
                            let data = JSON.parse(res.text);
                            if (res.ok && data.code != 1) {
                                console.log(data.code)
                                this.show = true;
                                this.msg = data.resMsg;
                                setTimeout(() => {
                                    this.reload();
                                }, 1000);
                            } else {
                                this.msg = JSON.parse(res.text).resMsg;
                                this.show = true;
                                console.log('评论活动失败');
                            }
                        });
                }
            },
            reload () {
                this.$router.push({path: 'activities'});
            }
        }
    }
</script>


<style scpoed>
    .align-middle {
        text-align: center;
    }

    .text-scroll {
        border: 1px solid #ddd;
        border-left: none;
        border-right: none;
    }

    .text-scroll p {
        font-size: 12px;
        text-align: center;
        line-height: 30px;
    }
</style>